<template>
  <a-spin :spinning="loading">
    <a-card>
      <section>
        <a-row class="mb-16" :gutter="16">
          <a-col class="flex items-center" :span="8">
            <span class="label">车牌号：</span>
            <a-input
              v-model="vehicleLicenceNum"
              @keyup.enter="search"
              :max-length="50"
              class="flex-1"
              placeholder="请输入车牌号"
            ></a-input>
          </a-col>
          <a-col class="flex items-center" :span="8">
            <span class="label">车辆状态：</span>
            <a-select v-model="status" allow-clear @change="search" class="flex-1" placeholder="请选择车辆状态">
              <a-select-option v-for="item in vehicleStatusEnums" :key="item.value" :value="item.value"
                >{{ item.name }}
              </a-select-option>
            </a-select>
          </a-col>
          <!-- <a-col class="flex items-center" :span="8">
            <span class="label">供应商：</span>
            <a-input
              v-model="vendorName"
              @keyup.enter="search"
              :max-length="50"
              class="flex-1"
              placeholder="请输入供应商名称"
            ></a-input>
          </a-col> -->
        </a-row>
        <a-row class="mb-16" :gutter="16">
          <a-col class="flex items-center" :span="8">
            <span class="label">注册时间：</span>
            <a-range-picker
              @change="search"
              v-model="createTimeArr"
              class="flex-1 overflow-hidden"
              placeholder="请选择创建日期"
            />
          </a-col>
          <a-col class="flex items-center" :span="8">
            <span class="label">车型选择：</span>
            <a-select
              v-model="vehicleTypeId"
              allow-clear
              @change="search"
              class="flex-1 overflow-hidden"
              placeholder="请选择车型"
            >
              <a-select-option v-for="item in storeVehicleTypeList" :key="item.code" :value="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col class="flex items-center" :span="8">
            <a-button type="primary" @click="search">查询</a-button>
            <!-- <a-button class="mx-8" @click="reset">重置</a-button> -->
            <!-- <a href="javascript:;" @click="isExpand = !isExpand">{{ isExpand ? '收起' : '展开' }}</a> -->
          </a-col>
        </a-row>
        <a-table :columns="columns" :data-source="carList" :pagination="pagination" class="over">
          <section class="text-left" slot="carInfo" slot-scope="val, record">
            <section class="font-bold">
              <a-tag color="#1890ff" class="text-18 py-4">{{ record.vehicleLicenceNum }}</a-tag>
            </section>
            <section class="font-bold text-16">{{ record | getVehicleTypeName }}</section>
            <section class="text-14">车架号：{{ record.frameNum }}</section>
            <section class="text-14">发动机号：{{ record.engineNum }}</section>
          </section>
          <section slot="storeInfo" slot-scope="val, record">
            <section>{{ record.storeName }}</section>
            <section class="text-12">{{ record.storeCityName }}</section>
          </section>
          <template #carImg="val, record">
            <div class="flex justify-center">
              <img
                @click="
                  isPreviewVisible = true
                  previewImage = record.pcImgUrl
                "
                :src="record.pcImgUrl"
                alt=""
                class="w-80 h-80 br5 object-cover mx-5 ss-img cursor-pointer"
              />
              <img
                @click="
                  isPreviewVisible = true
                  previewImage = record.mobileImgUrl
                "
                :src="record.mobileImgUrl"
                alt=""
                class="w-80 h-80 br5 object-cover mx-5 ss-img cursor-pointer"
              />
            </div>
          </template>
          <template #drivingInfo="val, record">
            <section>行驶里程：{{ record.currentMileage }}km</section>
            <section>注册时间：{{ record.drivingRegisteredDate }}</section>
          </template>
          <template #status="status, record">
            <section v-if="status === 1" class="success-color">营运中</section>
            <section v-if="status === 2" class="grey">下架</section>
            <section v-if="status === 3" class="warning-color">待审</section>
            <a-tooltip v-if="status === 4" :title="`未通过理由：${record.auditRefusedReason}`">
              <section class="error-color">审核拒绝</section>
            </a-tooltip>
            <section v-if="status === 5" class="warning-color">待提交</section>
            <section v-if="status === 6" class="grey">强制下架</section>
            <!-- <a-tooltip
              placement="top"
              v-if="record.auditEntityType"
              :title="$utils.getEnumName(auditTypeEnums, record.auditEntityType)"
            >
              <a-tag
                class="inline-block w-auto px-8 py-4 text-white m-auto my-4 border-0 warning-bg"
                style="white-space: normal"
                type="primary"
              >
                {{ $utils.getEnumName(auditTypeEnums, record.auditEntityType) }}
              </a-tag>
            </a-tooltip> -->
          </template>
          <template #action="val, record, index">
            <template v-if="$permissionJudge('StoreVehicleUpdate')">
              <a v-if="record.status === 5" href="javascript:;" class="block" @click="edit(record)">提交审核</a>
              <a v-if="record.status === 4" href="javascript:;" class="block" @click="edit(record)">再次审核</a>
              <a v-if="record.status === 1" href="javascript:;" class="block" @click="updateShelf(record)">车辆下架</a>
              <a v-if="record.status === 2" href="javascript:;" class="block" @click="updateShelf(record)">车辆上架</a>
            </template>
            <a href="javascript:;" class="block" @click="viewDetails(record)">车辆详情</a>
            <!-- <a href="javascript:;" class="block" @click="priceDetails(record)">车辆价格</a> -->
            <a
              v-if="record.status !== 1 && record.status !== 3 && $permissionJudge('StoreVehicleDelete')"
              href="javascript:;"
              class="block error-color"
              @click="deleteCar(record, index)"
              >车辆删除</a
            >
            <a
              href="javascript:;"
              class="block"
              @click="
                currCarData = record
                showHistoryModal = true
              "
              >车辆历史</a
            >
            <a href="javascript:;" class="block" @click="showLog(record)">车辆日志</a>
            <!-- <a href="javascript:;" class="block" @click="priceLog(record)">车型日志</a> -->

          </template>
        </a-table>
      </section>

      <!-- 车辆详情 -->
      <a-modal
        width="1060px"
        :dialog-style="{ top: '30px' }"
        :body-style="{ padding: '12px 24px' }"
        v-model="showCarInfoModal"
      >
        <section class="title" slot="title">
          <span>车辆详情</span>
          <section class="dot" />
          <span>{{ currCarData.vehicleLicenceNum }}</span>
          <section class="dot" />
          <section class="flex items-center">
            <a-tag v-if="currCarData.isInLease" class="tag primary-bg">租赁中</a-tag>
            <a-tag
              v-if="
                currCarData.needMaintainStatus === 0 &&
                currCarData.needInsuranceStatus === 0 &&
                currCarData.needAnnuallyStatus === 0
              "
              class="tag success-bg"
            >
              正常维保
            </a-tag>
            <!--						保养状态-->
            <a-tag
              v-if="currCarData.needMaintainStatus !== 0"
              class="tag primary-bg"
              :class="{
                'warning-bg': currCarData.needMaintainStatus === 1,
                'grey-bg': currCarData.needMaintainStatus === 4,
              }"
            >
              {{ $utils.getEnumName(vehicleMaintainStatusEnums, currCarData.needMaintainStatus) }}
            </a-tag>
            <!--						年检状态-->
            <a-tag
              v-if="currCarData.needAnnuallyStatus !== 0"
              class="tag primary-bg"
              :class="{
                'warning-bg': currCarData.needAnnuallyStatus === 2,
                'grey-bg': currCarData.needAnnuallyStatus === 5,
              }"
            >
              {{ $utils.getEnumName(vehicleMaintainStatusEnums, currCarData.needAnnuallyStatus) }}
            </a-tag>
            <!--						续保状态-->
            <a-tag
              v-if="currCarData.needInsuranceStatus !== 0"
              class="tag primary-bg"
              :class="{
                'warning-bg': currCarData.needInsuranceStatus === 3,
              }"
            >
              {{ $utils.getEnumName(vehicleMaintainStatusEnums, currCarData.needInsuranceStatus) }}
            </a-tag>
            <!--						<a-tag class="tag warning-bg">待保养</a-tag>-->
            <!--						<a-tag class="tag grey-bg">保养中</a-tag>-->
            <!--						<a-tag class="tag warning-bg">待续保</a-tag>-->
            <!--						<a-tag class="tag warning-bg">待年检</a-tag>-->
            <!--						<a-tag class="tag grey-bg">年检中</a-tag>-->
          </section>
        </section>
        <a-spin :spinning="detailsLoading">
          <section style="padding-right: 8px; height: calc(100vh - 248px); overflow: auto">
            <TravelInfo is-view :car-data="currCarData" />
          </section>
        </a-spin>
        <template #footer>
          <a-button type="primary" @click="showCarInfoModal = false">好的</a-button>
        </template>
      </a-modal>

      <!-- 车辆历史 -->
      <a-modal
        v-model="showHistoryModal"
        width="1200px"
        :dialog-style="{ top: '30px' }"
        :body-style="{ padding: '12px 24px' }"
      >
        <section slot="title" class="title">
          <span>车辆维保租借历史</span>
          <section class="dot" />
          <span>{{ currCarData.vehicleLicenceNum }}</span>
        </section>
        <HistoryList v-if="showHistoryModal" :vehicle-id="currCarData.id" />
        <template #footer>
          <a-button type="primary" @click="showHistoryModal = false">好的</a-button>
        </template>
      </a-modal>

      <!-- 车辆价格 -->
      <a-modal
        v-model="showCarPrice"
        width="1200px"
        :dialog-style="{ top: '30px' }"
        :body-style="{ padding: '12px 24px' }"
      >
        <section slot="title" class="title">
          <span>车辆价格</span>
          <!-- <section class="dot" />
          <span>{{ currCarData.vehicleLicenceNum }}</span> -->
        </section>
        <CarPrice
          v-if="showCarPrice"
          :vehicle-id="currCarData.id"
          :PricevehicleTypeId="PricevehicleTypeId"
          :storeId="storeId2"
        />
        <template #footer>
          <a-button type="primary" @click="showCarPrice = false">好的</a-button>
        </template>
      </a-modal>
    </a-card>
    <Log :type="2" ref="log">
      <section slot="title" class="title">
        <section>车辆日志</section>
        <section class="dot" />
        <section>{{ currCarData.vehicleLicenceNum }}</section>
      </section>
    </Log>
      <Log :type="3" ref="priceLog">
          <section slot="title" class="title">
              <section>车型日志</section>
              <section class="dot" />
              <section>{{ currStoreData.id }}</section>
          </section>
      </Log>
  </a-spin>
</template>

<script>
import { tableMixins } from '@/utils/mixins'
import { getCarPagedList, getCarDetails, updateForceShelf, getStoreVehicleTypeList } from '@/api/store/index'
import TravelInfo from './TravelInfo'
import HistoryList from './HistoryList'
import CarPrice from './CarPrice'

export default {
  mixins: [tableMixins],
  components: { TravelInfo, HistoryList, CarPrice },
  props: {
    storeId2: {
      type: Number,
    },
    // carList: {
    //   type: Array,
    // },
  },
  data() {
    return {
      isExpand: false,
      loading: false,
      pageNum: 1,
      rowsNum: 10,
      vehicleLicenceNum: '',
      // vendorName: '',
      createTimeArr: [undefined, undefined], //注册时间
      vehicleTypeId: undefined,
      frameNum: '',
      status: undefined,
      columns: [
        {
          title: '车辆信息',
          width: 300,
          dataIndex: 'carInfo',
          align: 'center',
          scopedSlots: { customRender: 'carInfo' },
        },
        {
          title: '门店信息',
          width: 160,
          dataIndex: 'storeInfo',
          align: 'center',
          scopedSlots: { customRender: 'storeInfo' },
        },
        {
          title: '车型图片',
          width: 260,
          dataIndex: 'carImg',
          align: 'center',
          scopedSlots: { customRender: 'carImg' },
        },
        {
          title: '行驶信息',
          width: 200,
          dataIndex: 'drivingInfo',
          align: 'center',
          scopedSlots: { customRender: 'drivingInfo' },
        },
        {
          title: '供应商',
          width: 200,
          dataIndex: 'vendorName',
          align: 'center',
          scopedSlots: { customRender: 'vendorName' },
        },
        {
          title: '车辆状态',
          width: 120,
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          width: 100,
          fixed: 'right',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      carList: [],
      showCarInfoModal: false,
      detailsLoading: false,
      currCarData: {},
      showHistoryModal: false,
      showCarPrice: false,
      PricevehicleTypeId: undefined,
      storeVehicleTypeList: [],
      currStoreData: {},
    }
  },
  computed: {},
  watch: {},
  async created() {
    this.transmissionTypeEnums = await this.$utils.getDictList('TransmissionType')
    this.vehicleMaintainStatusEnums = await this.$utils.getDictList('VehicleMaintainStatus')
    this.vehicleStatusEnums = await this.$utils.getDictList('VehicleStatus')
    this.auditTypeEnums = await this.$utils.getDictList('AuditEntityType')
    await this.getStoreVehicleTypeList()
   
    // await this.getData()
    // this.$watch(
    //   'storeId',
    //   () => {
    //     getStoreVehicleTypeList({ storeId: this.storeId }).then((data) => (this.storeVehicleTypeList = data))
    //   },
    //   { immediate: true }
    // )
  },
  mounted() {
    this.getData()
  },
  destroyed() {},
  methods: {
      priceLog(item) {
          console.log(`item`, item)
          this.currStoreData = item
          this.$refs.priceLog.open(item.id)
      },
    search() {
      this.pageNum = 1
      this.getData()
    },
    reset() {
      this.vehicleLicenceNum = ''
      this.vehicleTypeId = undefined
      this.frameNum = ''
      // this.vendorName = ''
      this.status = undefined
      this.createTimeArr = [undefined, undefined]
      this.search()
    },
    // 车型
    getStoreVehicleTypeList() {
      getStoreVehicleTypeList({ storeId: this.storeId }).then((data) => (this.storeVehicleTypeList = data))
    },
    //车辆信息
    getData(storeId) {
      this.loading = true
      getCarPagedList({
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
        storeId: this.storeId2,
        // vendorName: this.vendorName,
        vehicleLicenceNum: this.vehicleLicenceNum.trim(),
        vehicleTypeId: this.vehicleTypeId,
        frameNum: this.frameNum.trim(),
        status: this.status,
        registeredTimeStart: this.$utils.getStartTime(this.createTimeArr[0]),
        registeredTimeEnd: this.$utils.getEndTime(this.createTimeArr[1]),
      })
        .then((data) => {
          this.carList = data.items
          this.total = data.rowCount
        })
        .finally(() => (this.loading = false))
    },
    // 车辆详情
    viewDetails(record) {
      this.showCarInfoModal = true
      this.detailsLoading = true
      getCarDetails({ id: record.id })
        .then((data) => {
          this.currCarData = {
            ...record,
            ...data,
          }
        })
        .finally(() => (this.detailsLoading = false))
    },
    priceDetails(data) {
      this.PricevehicleTypeId = data.vehicleTypeId
      this.showCarPrice = true
    },
    // 车辆日志
    showLog(data) {
      this.currCarData = data
      this.$refs.log.open(data.id)
    },
    // 车辆下架
    updateShelf(data) {
      const isShelf = data.status === 2
      if (!isShelf) {
        this.$confirm({
          title: '提示',
          content: '请确认是否下架当前车辆？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk: () => {
            this.loading = true
            updateForceShelf({ id: data.id, isShelf })
              .then(() => {
                this.loading = false
                data.status = isShelf ? 1 : 2
                this.$message.success(`${isShelf ? '上' : '下'}架成功！`)
              })
              .finally(() => (this.loading = false))
          },
        })
      } else {
        this.loading = true
        updateForceShelf({ id: data.id, isShelf })
          .then(() => {
            this.loading = false
            data.status = isShelf ? 1 : 2
            this.$message.success(`${isShelf ? '上' : '下'}架成功！`)
          })
          .finally(() => (this.loading = false))
      }
    },
  },
}
</script>
<style scoped lang='less'>
.title {
  display: flex;
  align-items: center;

  .dot {
    width: 4px;
    height: 4px;
    margin: 0 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
  }
}
.tag {
  display: block;
  width: 70px;
  padding: 4px 2px;
  text-align: center;
  color: #fff;
  margin: auto;
  margin-right: 8px;
  border: 0;
}
.over {
  overflow-y: scroll;
  min-height: calc(100vh - 360px);
  max-height: calc(100vh - 260px);
}
</style>
